<!--
// 
// LogList.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/09/06.
// 
-->
<template>
    <div class="LogList">
        <div class="sub-container">
            <div class="label">操作日志</div>
            <div class="list">
                <template v-for="log in list" :key="log.id">
                    <div class="log">
                        <div class="head">
                            <!--1-创建-->
                            <div v-if="log.type === 1" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">创建了任务</span>
                            </div>

                            <!--2-指派-->
                            <div v-if="log.type === 2" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">指派给</span>
                                <LogUser :id="log.toUserId" :name="log.toUserName" color="#E6A23C" icon-color="#f8e3c5" />
                            </div>

                            <!--3-提交审核-->
                            <div v-if="log.type === 3" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">提交审核给</span>
                                <LogUser :id="log.toUserId" :name="log.toUserName" color="#E6A23C" icon-color="#f8e3c5" />
                            </div>

                            <!--4-拒绝-->
                            <div v-if="log.type === 4" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">拒绝了该任务</span>
                            </div>

                            <!--5-通过-->
                            <div v-if="log.type === 5" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">审核通过了该任务</span>
                            </div>

                            <!--6-未通过-->
                            <div v-if="log.type === 6" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">审核未通过</span>
                            </div>

                            <!--7-关闭-->
                            <div v-if="log.type === 7" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">关闭了该任务</span>
                            </div>

                            <!--8-评论-->
                            <div v-if="log.type === 8" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">发表了评论</span>
                            </div>

                            <!--9-修改-->
                            <div v-if="log.type === 9" class="left">
                                <LogUser :id="log.fromUserId" :name="log.fromUserName" />
                                <span class="operation-desc">修改了该任务</span>
                            </div>

                            <div class="time">
                                <g-date-time-preview :value="log.createdTime" hide-icon />
                            </div>
                        </div>
                        <g-rich-text :value="log.remark" style="padding: 10px 0 0 40px;color: #333;"/>
                    </div>

                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import LogUser from "./LogUser.vue"

const props = defineProps({
    list: {type: Array, default: () => []},
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.LogList {
    padding: 0 10px 60px 10px;

    .sub-container {
        margin-top: 10px;

        .label {
            border-left: 4px solid var(--el-color-primary);
            padding-left: 10px;
        }

        .list {
            padding-left: 10px;

            .log {
                margin-top: 10px;
                font-size: 14px;
                margin-bottom: 20px;
                color: #333;
                .head {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    .left {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;

                        .operation-desc {
                            padding: 0 10px;
                        }

                    }

                    .time {
                        color: gray;
                    }
                }
            }
        }
    }
}
</style>